<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="plugin-wrapper.html">
<link rel="import" href="empty-state.html">

<dom-module id="web-dash">
  <template>
    <style>
      :host {
        display: block;
        padding: 10px;
      }

      #plugins {
        --space: 80px;
        margin-left: var(--space);
        margin-right: var(--space);
        margin-top: 30px;
        margin-bottom: 50px;
        width: auto !important;
      }

      .plugin {
        width: calc(50vw - 105px);
        padding: 0;
        background-color: gray;
        color: white;
        border-radius: 6px;
        background-color: #3b4c59;
      }

      @media screen and (max-width: 800px) {
        #plugins{
          --space: 30px;
        }
        .plugin {
          width: calc(100vw - 75px);
        }
      }
    </style>

    <div id="plugins"></div>

    <template is="dom-if" if="{{!plugins.length}}">
      <empty-state></empty-state>
    </template>
  </template>

  <script src="/node_modules/bricks.js/dist/bricks.js"></script>
  <script src="/node_modules/resize-observer-polyfill/dist/ResizeObserver.global.js"></script>
  <script>
    class WebDash extends Polymer.Element {
      static get is() { return 'web-dash'; }

      ready() {
        super.ready();

        this.backend = new Backend('webdash');

        this.backend.get('plugins')
          .then(data => {
            const plugins = data.plugins;
            this.plugins = plugins;
            if (!this.plugins || !this.plugins.length) {
              return false;
            }

            for (const plugin of plugins) {
              Polymer.importHref([`/node_modules/${plugin}/${plugin}.html`], () => {
                const wrapper = document.createElement('plugin-wrapper');
                wrapper.setAttribute('name', plugin);
                wrapper.classList.add('plugin');
                wrapper.classList.add('card');

                const element = document.createElement(plugin);
                wrapper.appendChild(element);
                this.$.plugins.appendChild(wrapper);
                var ro = new ResizeObserver(entries => {
                  this.refreshMasonry();
                });

                // Observe one or multiple elements
                ro.observe(wrapper);

              });
            }


            this.setupMasonry();

          });
      }

      setupMasonry() {
        const sizes = [
          { columns: 1, gutter: 30 },
          { mq: '800px', columns: 2, gutter: 30 },
        ];

        this.instance = Bricks({
          container: this.$.plugins,
          packed: 'data-packed',
          sizes,
          position: false
        });
        this.refreshMasonry();
      }

      refreshMasonry() {
        if (!this.instance) return false;

        this.instance.pack();
      }
    }


    window.customElements.define(WebDash.is, WebDash);
  </script>
</dom-module>
